PostMessage API-ஐப் பயன்படுத்தி பாதுகாப்பான குறுக்கு-மூலத் தொடர்பை ஆராயுங்கள். வலைப் பயன்பாடுகளில் உள்ள பாதிப்புகளைத் தணிக்க, அதன் திறன்கள், பாதுகாப்பு அபாயங்கள் மற்றும் சிறந்த நடைமுறைகளைப் பற்றி அறிந்து கொள்ளுங்கள்.
குறுக்கு-மூலத் தொடர்பு: PostMessage API-உடன் பாதுகாப்பு வடிவங்கள்
நவீன வலையில், பயன்பாடுகள் அடிக்கடி வெவ்வேறு மூலங்களிலிருந்து வரும் ஆதாரங்களுடன் தொடர்பு கொள்ள வேண்டும். ஒரே-மூலக் கொள்கை (SOP) என்பது ஒரு முக்கியமான பாதுகாப்பு வழிமுறையாகும், இது ஸ்கிரிப்ட்கள் வேறு மூலத்திலிருந்து வரும் ஆதாரங்களை அணுகுவதைத் தடுக்கிறது. இருப்பினும், குறுக்கு-மூலத் தொடர்பு அவசியமான முறையான சூழ்நிலைகளும் உள்ளன. postMessage API இதை அடைவதற்கு ஒரு கட்டுப்படுத்தப்பட்ட வழிமுறையை வழங்குகிறது, ஆனால் அதன் சாத்தியமான பாதுகாப்பு அபாயங்களைப் புரிந்துகொண்டு பொருத்தமான பாதுகாப்பு வடிவங்களைச் செயல்படுத்துவது மிகவும் முக்கியம்.
ஒரே-மூலக் கொள்கையை (SOP) புரிந்துகொள்ளுதல்
ஒரே-மூலக் கொள்கை என்பது வலை உலாவிகளில் ஒரு அடிப்படை பாதுகாப்பு கருத்தாகும். இது வலைப் பக்கங்களை வழங்கிய டொமைனைத் தவிர வேறு டொமைனுக்கு கோரிக்கைகளை வைப்பதிலிருந்து வலைப் பக்கங்களைத் தடுக்கிறது. ஒரு மூலம் என்பது திட்டம் (நெறிமுறை), புரவலன் (டொமைன்), மற்றும் போர்ட் ஆகியவற்றால் வரையறுக்கப்படுகிறது. இவற்றில் ஏதேனும் ஒன்று வேறுபட்டால், மூலங்கள் வேறுபட்டதாகக் கருதப்படுகின்றன. உதாரணமாக:
https://example.comhttps://www.example.comhttp://example.comhttps://example.com:8080
இவை அனைத்தும் வெவ்வேறு மூலங்கள், மற்றும் SOP அவற்றுக்கிடையே நேரடி ஸ்கிரிப்ட் அணுகலைத் தடுக்கிறது.
PostMessage API-ஐ அறிமுகப்படுத்துதல்
postMessage API குறுக்கு-மூலத் தொடர்புக்கு ஒரு பாதுகாப்பான மற்றும் கட்டுப்படுத்தப்பட்ட வழிமுறையை வழங்குகிறது. இது ஸ்கிரிப்ட்களை அவற்றின் மூலத்தைப் பொருட்படுத்தாமல் மற்ற சாளரங்களுக்கு (எ.கா., iframes, புதிய சாளரங்கள், அல்லது தாவல்கள்) செய்திகளை அனுப்ப அனுமதிக்கிறது. பெறும் சாளரம் இந்த செய்திகளைக் கேட்டு அதற்கேற்ப செயலாக்க முடியும்.
செய்தியை அனுப்புவதற்கான அடிப்படை தொடரியல்:
otherWindow.postMessage(message, targetOrigin);
otherWindow: இலக்கு சாளரத்திற்கான ஒரு குறிப்பு (எ.கா.,window.parent,iframe.contentWindow, அல்லதுwindow.open-இலிருந்து பெறப்பட்ட ஒரு சாளரப் பொருள்).message: நீங்கள் அனுப்ப விரும்பும் தரவு. இது வரிசைப்படுத்தக்கூடிய எந்தவொரு ஜாவாஸ்கிரிப்ட் பொருளாகவும் இருக்கலாம் (எ.கா., சரங்கள், எண்கள், பொருள்கள், வரிசைகள்).targetOrigin: நீங்கள் செய்தி அனுப்ப விரும்பும் மூலத்தைக் குறிப்பிடுகிறது. இது ஒரு முக்கியமான பாதுகாப்பு அளவுருவாகும்.
பெறும் முனையில், நீங்கள் message நிகழ்வைக் கேட்க வேண்டும்:
window.addEventListener('message', function(event) {
// ...
});
event பொருள் பின்வரும் பண்புகளைக் கொண்டுள்ளது:
event.data: மற்ற சாளரத்தால் அனுப்பப்பட்ட செய்தி.event.origin: செய்தியை அனுப்பிய சாளரத்தின் மூலம்.event.source: செய்தியை அனுப்பிய சாளரத்திற்கான ஒரு குறிப்பு.
பாதுகாப்பு அபாயங்கள் மற்றும் பாதிப்புகள்
postMessage SOP கட்டுப்பாடுகளைத் தவிர்ப்பதற்கான ஒரு வழியை வழங்கினாலும், கவனமாக செயல்படுத்தப்படாவிட்டால் அது சாத்தியமான பாதுகாப்பு அபாயங்களையும் அறிமுகப்படுத்துகிறது. இங்கே சில பொதுவான பாதிப்புகள் உள்ளன:
1. இலக்கு மூலப் பொருத்தமின்மை
event.origin பண்பை சரிபார்க்கத் தவறுவது ஒரு முக்கியமான பாதிப்பாகும். பெறுநர் செய்தியை கண்மூடித்தனமாக நம்பினால், எந்தவொரு வலைத்தளமும் தீங்கிழைக்கும் தரவை அனுப்ப முடியும். செய்தியைச் செயலாக்குவதற்கு முன்பு எப்போதும் event.origin எதிர்பார்த்த மூலத்துடன் பொருந்துகிறதா என்பதைச் சரிபார்க்கவும்.
எடுத்துக்காட்டு (பாதிக்கப்படக்கூடிய குறியீடு):
window.addEventListener('message', function(event) {
// DO NOT DO THIS!
processMessage(event.data);
});
எடுத்துக்காட்டு (பாதுகாப்பான குறியீடு):
window.addEventListener('message', function(event) {
if (event.origin !== 'https://trusted-origin.com') {
console.warn('Received message from untrusted origin:', event.origin);
return;
}
processMessage(event.data);
});
2. தரவு உட்செலுத்துதல்
பெறப்பட்ட தரவை (event.data) இயக்கக்கூடிய குறியீடாகக் கருதுவது அல்லது அதை நேரடியாக DOM-இல் உட்செலுத்துவது குறுக்கு-தள ஸ்கிரிப்டிங் (XSS) பாதிப்புகளுக்கு வழிவகுக்கும். பெறப்பட்ட தரவைப் பயன்படுத்துவதற்கு முன்பு எப்போதும் அதை சுத்திகரித்து சரிபார்க்கவும்.
எடுத்துக்காட்டு (பாதிக்கப்படக்கூடிய குறியீடு):
window.addEventListener('message', function(event) {
if (event.origin === 'https://trusted-origin.com') {
document.body.innerHTML = event.data; // DO NOT DO THIS!
}
});
எடுத்துக்காட்டு (பாதுகாப்பான குறியீடு):
window.addEventListener('message', function(event) {
if (event.origin === 'https://trusted-origin.com') {
const sanitizedData = sanitize(event.data); // Implement a proper sanitization function
document.getElementById('message-container').textContent = sanitizedData;
}
});
function sanitize(data) {
// Implement robust sanitization logic here.
// For example, use DOMPurify or a similar library
return DOMPurify.sanitize(data);
}
3. இடையூறுத் தாக்குதல்கள் (MITM)
பாதுகாப்பற்ற சேனல் (HTTP) வழியாக தொடர்பு நடந்தால், ஒரு MITM தாக்குதல்தாரி செய்திகளை இடைமறித்து மாற்ற முடியும். பாதுகாப்பான தகவல்தொடர்புக்கு எப்போதும் HTTPS-ஐப் பயன்படுத்தவும்.
4. குறுக்கு-தள கோரிக்கை மோசடி (CSRF)
பெறுநர் சரியான சரிபார்ப்பு இல்லாமல் பெறப்பட்ட செய்தியின் அடிப்படையில் செயல்களைச் செய்தால், ஒரு தாக்குதல்தாரி திட்டமிடப்படாத செயல்களைச் செய்ய பெறுநரை ஏமாற்றுவதற்காக செய்திகளை போலியாக உருவாக்கக்கூடும். செய்தியில் ஒரு ரகசிய டோக்கனைச் சேர்ப்பது மற்றும் பெறுநர் பக்கத்தில் அதைச் சரிபார்ப்பது போன்ற CSRF பாதுகாப்பு வழிமுறைகளைச் செயல்படுத்தவும்.
5. targetOrigin-இல் வைல்டு கார்டுகளைப் பயன்படுத்துதல்
targetOrigin-ஐ * என அமைப்பது எந்த மூலமும் செய்தியைப் பெற அனுமதிக்கிறது. இது முற்றிலும் அவசியமில்லாவிட்டால் தவிர்க்கப்பட வேண்டும், ஏனெனில் இது மூலம் அடிப்படையிலான பாதுகாப்பின் நோக்கத்தை முறியடிக்கிறது. நீங்கள் *-ஐப் பயன்படுத்த வேண்டியிருந்தால், செய்தி அங்கீகாரக் குறியீடுகள் (MACs) போன்ற பிற வலுவான பாதுகாப்பு நடவடிக்கைகளைச் செயல்படுத்துவதை உறுதிசெய்யவும்.
எடுத்துக்காட்டு (இதைத் தவிர்க்கவும்):
otherWindow.postMessage(message, '*'); // Avoid using '*' unless absolutely necessary
பாதுகாப்பு வடிவங்கள் மற்றும் சிறந்த நடைமுறைகள்
postMessage உடன் தொடர்புடைய அபாயங்களைக் குறைக்க, இந்த பாதுகாப்பு வடிவங்கள் மற்றும் சிறந்த நடைமுறைகளைப் பின்பற்றவும்:
1. கடுமையான மூல சரிபார்ப்பு
பெறுநர் பக்கத்தில் எப்போதும் event.origin பண்பை சரிபார்க்கவும். நம்பகமான மூலங்களின் முன்வரையறுக்கப்பட்ட பட்டியலுடன் அதை ஒப்பிடுக. ஒப்பீட்டிற்கு கடுமையான சமத்துவத்தை (===) பயன்படுத்தவும்.
2. தரவு சுத்திகரிப்பு மற்றும் சரிபார்ப்பு
postMessage மூலம் பெறப்பட்ட அனைத்து தரவையும் பயன்படுத்துவதற்கு முன்பு சுத்திகரித்து சரிபார்க்கவும். தரவு எவ்வாறு பயன்படுத்தப்படும் என்பதைப் பொறுத்து பொருத்தமான சுத்திகரிப்பு நுட்பங்களைப் பயன்படுத்தவும் (எ.கா., HTML எஸ்கேப்பிங், URL என்கோடிங், உள்ளீட்டு சரிபார்ப்பு). HTML-ஐ சுத்திகரிக்க DOMPurify போன்ற நூலகங்களைப் பயன்படுத்தவும்.
3. செய்தி அங்கீகாரக் குறியீடுகள் (MACs)
செய்தியின் ஒருமைப்பாடு மற்றும் நம்பகத்தன்மையை உறுதிப்படுத்த செய்தியில் ஒரு செய்தி அங்கீகாரக் குறியீட்டை (MAC) சேர்க்கவும். அனுப்புநர் பகிரப்பட்ட ரகசிய விசையைப் பயன்படுத்தி MAC-ஐ கணக்கிட்டு அதை செய்தியில் சேர்க்கிறார். பெறுநர் அதே பகிரப்பட்ட ரகசிய விசையைப் பயன்படுத்தி MAC-ஐ மீண்டும் கணக்கிட்டு, பெறப்பட்ட MAC-உடன் ஒப்பிடுகிறார். அவை பொருந்தினால், செய்தி நம்பகமானதாகவும் மாற்றப்படாததாகவும் கருதப்படுகிறது.
எடுத்துக்காட்டு (HMAC-SHA256-ஐப் பயன்படுத்துதல்):
// Sender
async function sendMessage(message, targetOrigin, sharedSecret) {
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(message));
const key = await crypto.subtle.importKey(
"raw",
encoder.encode(sharedSecret),
{ name: "HMAC", hash: "SHA-256" },
false,
["sign"]
);
const signature = await crypto.subtle.sign("HMAC", key, data);
const signatureArray = Array.from(new Uint8Array(signature));
const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');
const securedMessage = {
data: message,
signature: signatureHex
};
otherWindow.postMessage(securedMessage, targetOrigin);
}
// Receiver
async function receiveMessage(event, sharedSecret) {
if (event.origin !== 'https://trusted-origin.com') {
console.warn('Received message from untrusted origin:', event.origin);
return;
}
const securedMessage = event.data;
const message = securedMessage.data;
const receivedSignature = securedMessage.signature;
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(message));
const key = await crypto.subtle.importKey(
"raw",
encoder.encode(sharedSecret),
{ name: "HMAC", hash: "SHA-256" },
false,
["verify"]
);
const signature = await crypto.subtle.sign("HMAC", key, data);
const signatureArray = Array.from(new Uint8Array(signature));
const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');
if (signatureHex === receivedSignature) {
console.log('Message is authentic!');
processMessage(message); // Proceed with processing the message
} else {
console.error('Message signature verification failed!');
}
}
முக்கியம்: பகிரப்பட்ட ரகசிய விசை பாதுகாப்பாக உருவாக்கப்பட்டு சேமிக்கப்பட வேண்டும். குறியீட்டில் விசையை ஹார்ட்கோட் செய்வதைத் தவிர்க்கவும்.
4. நான்ஸ் மற்றும் நேரமுத்திரைகளைப் பயன்படுத்துதல்
மறுதாக்குதல்களைத் தடுக்க, செய்தியில் ஒரு தனித்துவமான நான்ஸ் (ஒருமுறை பயன்படுத்தப்படும் எண்) மற்றும் ஒரு நேரமுத்திரையைச் சேர்க்கவும். பெறுநர் பின்னர் நான்ஸ் முன்பு பயன்படுத்தப்படவில்லை என்பதையும், நேரமுத்திரை ஏற்றுக்கொள்ளக்கூடிய காலக்கெடுவுக்குள் இருப்பதையும் சரிபார்க்க முடியும். இது ஒரு தாக்குதல்தாரி முன்பு இடைமறிக்கப்பட்ட செய்திகளை மீண்டும் அனுப்புவதன் அபாயத்தைக் குறைக்கிறது.
5. குறைந்தபட்ச சிறப்புரிமைக் கொள்கை
மற்ற சாளரத்திற்கு தேவையான குறைந்தபட்ச சிறப்புரிமைகளை மட்டுமே வழங்கவும். உதாரணமாக, மற்ற சாளரம் தரவைப் படிக்க மட்டுமே தேவைப்பட்டால், அது தரவை எழுத அனுமதிக்காதீர்கள். உங்கள் தொடர்பு நெறிமுறையை குறைந்தபட்ச சிறப்புரிமைக் கொள்கையைக் மனதில் கொண்டு வடிவமைக்கவும்.
6. உள்ளடக்கப் பாதுகாப்புக் கொள்கை (CSP)
ஸ்கிரிப்ட்களை எங்கிருந்து ஏற்றலாம் மற்றும் ஸ்கிரிப்ட்கள் என்ன செயல்களைச் செய்ய முடியும் என்பதைக் கட்டுப்படுத்த உள்ளடக்கப் பாதுகாப்புக் கொள்கையை (CSP) பயன்படுத்தவும். இது postMessage தரவை முறையற்ற முறையில் கையாள்வதால் ஏற்படக்கூடிய XSS பாதிப்புகளின் தாக்கத்தைக் குறைக்க உதவும்.
7. உள்ளீட்டு சரிபார்ப்பு
பெறப்பட்ட தரவின் கட்டமைப்பு மற்றும் வடிவமைப்பை எப்போதும் சரிபார்க்கவும். ஒரு தெளிவான செய்தி வடிவமைப்பை வரையறுத்து, பெறப்பட்ட தரவு இந்த வடிவமைப்பிற்கு இணங்குவதை உறுதிசெய்யவும். இது எதிர்பாராத நடத்தை மற்றும் பாதிப்புகளைத் தடுக்க உதவுகிறது.
8. பாதுகாப்பான தரவு வரிசைப்படுத்தல்
செய்திகளை வரிசைப்படுத்த மற்றும் வரிசையிலிருந்து மாற்ற JSON போன்ற பாதுகாப்பான தரவு வரிசைப்படுத்தல் வடிவமைப்பைப் பயன்படுத்தவும். eval() அல்லது Function() போன்ற குறியீடு இயக்கத்தை அனுமதிக்கும் வடிவங்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
9. செய்தி அளவைக் கட்டுப்படுத்துதல்
postMessage மூலம் அனுப்பப்படும் செய்திகளின் அளவைக் கட்டுப்படுத்துங்கள். பெரிய செய்திகள் அதிகப்படியான ஆதாரங்களைப் பயன்படுத்தக்கூடும் மற்றும் சேவை மறுப்புத் தாக்குதல்களுக்கு வழிவகுக்கும்.
10. வழக்கமான பாதுகாப்பு தணிக்கைகள்
சாத்தியமான பாதிப்புகளைக் கண்டறிந்து சரிசெய்ய உங்கள் குறியீட்டின் வழக்கமான பாதுகாப்பு தணிக்கைகளை நடத்தவும். postMessage-இன் செயலாக்கத்தில் மிகுந்த கவனம் செலுத்தி, அனைத்து பாதுகாப்பு சிறந்த நடைமுறைகளும் பின்பற்றப்படுவதை உறுதிசெய்யவும்.
எடுத்துக்காட்டு காட்சி: ஒரு Iframe மற்றும் அதன் பெற்றோருக்கு இடையே பாதுகாப்பான தொடர்பு
https://iframe.example.com-இல் ஹோஸ்ட் செய்யப்பட்ட ஒரு iframe, https://parent.example.com-இல் ஹோஸ்ட் செய்யப்பட்ட அதன் பெற்றோர் பக்கத்துடன் தொடர்பு கொள்ள வேண்டிய ஒரு காட்சியைக் கவனியுங்கள். iframe பயனர் தரவை செயலாக்கத்திற்காக பெற்றோர் பக்கத்திற்கு அனுப்ப வேண்டும்.
Iframe (https://iframe.example.com):
// Generate a shared secret key (replace with a secure key generation method)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';
// Get user data
const userData = {
name: 'John Doe',
email: 'john.doe@example.com'
};
// Send the user data to the parent page
async function sendUserData(userData) {
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(userData));
const key = await crypto.subtle.importKey(
"raw",
encoder.encode(sharedSecret),
{ name: "HMAC", hash: "SHA-256" },
false,
["sign"]
);
const signature = await crypto.subtle.sign("HMAC", key, data);
const signatureArray = Array.from(new Uint8Array(signature));
const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');
const securedMessage = {
data: userData,
signature: signatureHex
};
parent.postMessage(securedMessage, 'https://parent.example.com');
}
sendUserData(userData);
பெற்றோர் பக்கம் (https://parent.example.com):
// Shared secret key (must match the iframe's key)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';
window.addEventListener('message', async function(event) {
if (event.origin !== 'https://iframe.example.com') {
console.warn('Received message from untrusted origin:', event.origin);
return;
}
const securedMessage = event.data;
const userData = securedMessage.data;
const receivedSignature = securedMessage.signature;
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(userData));
const key = await crypto.subtle.importKey(
"raw",
encoder.encode(sharedSecret),
{ name: "HMAC", hash: "SHA-256" },
false,
["verify"]
);
const signature = await crypto.subtle.sign("HMAC", key, data);
const signatureArray = Array.from(new Uint8Array(signature));
const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');
if (signatureHex === receivedSignature) {
console.log('Message is authentic!');
// Process the user data
console.log('User data:', userData);
} else {
console.error('Message signature verification failed!');
}
});
முக்கிய குறிப்புகள்:
YOUR_SECURE_SHARED_SECRET-ஐ பாதுகாப்பாக உருவாக்கப்பட்ட பகிரப்பட்ட ரகசிய விசை மூலம் மாற்றவும்.- பகிரப்பட்ட ரகசிய விசை iframe மற்றும் பெற்றோர் பக்கம் இரண்டிலும் ஒரே மாதிரியாக இருக்க வேண்டும்.
- இந்த எடுத்துக்காட்டு செய்தி அங்கீகாரத்திற்காக HMAC-SHA256-ஐப் பயன்படுத்துகிறது.
முடிவுரை
postMessage API என்பது வலைப் பயன்பாடுகளில் குறுக்கு-மூலத் தொடர்பை இயக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இருப்பினும், சாத்தியமான பாதுகாப்பு அபாயங்களைப் புரிந்துகொண்டு இந்த அபாயங்களைக் குறைக்க பொருத்தமான பாதுகாப்பு வடிவங்களைச் செயல்படுத்துவது மிகவும் முக்கியம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள பாதுகாப்பு வடிவங்கள் மற்றும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், வலுவான மற்றும் பாதுகாப்பான வலைப் பயன்பாடுகளை உருவாக்க நீங்கள் postMessage-ஐப் பாதுகாப்பாகப் பயன்படுத்தலாம்.
எப்போதும் பாதுகாப்பிற்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள் மற்றும் வலை மேம்பாட்டிற்கான சமீபத்திய பாதுகாப்பு சிறந்த நடைமுறைகளுடன் புதுப்பித்த நிலையில் இருங்கள். உங்கள் பயன்பாடுகள் சாத்தியமான பாதிப்புகளுக்கு எதிராக பாதுகாக்கப்படுவதை உறுதிசெய்ய உங்கள் குறியீடு மற்றும் பாதுகாப்பு உள்ளமைவுகளைத் தவறாமல் மதிப்பாய்வு செய்யவும்.